<template>
    <div>
        <div class="search">
            <input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音"/>
        </div>
        <div class="search-content" ref="wrapper" v-show="keyword">

            <ul>
                <li class="search-item border-bottom"
                    v-for="item of list" :key="item.id">
                    {{item.name}}</li>
            </ul>
            <ul>
                <li class="search-item border-bottom" v-show="hasNodata">没有找到匹配数据</li>
            </ul>

        </div>
    </div>
</template>

<script>
    import Bscroll from 'better-scroll'
    export default {
        name: "CitySearch",
        props:{
            cities:Object
        },


        data:function(){
            return{
                keyword:'',
                timer:null,
                list:[]
            }
        },
        mounted:function(){
            this.scroll=new Bscroll(this.$refs.wrapper)
        },
        computed:{
            hasNodata:function(){
                return !this.list.length
            }
        },

           watch:{
            keyword:function(){
                if(this.timer){
                    clearTimeout(this.timer)
                }
                if(!this.keyword){
                    this.list=[];
                    return
                }
                this.timer=setTimeout(()=>{
                    const result=[];
                    for (let i in this.cities){
                        this.cities[i].forEach((value)=>{
                            if(value.spell.indexOf(this.keyword)>-1||
                                value.name.indexOf(this.keyword)>-1){
                                       result.push(value)
                            }
                        })
                    }
                    this.list=result
                },100)
            }
           }

    }
</script>

<style lang="stylus" scoped>

    @import "~styles/varibles.styl"
.search
    height .72rem
    padding 0 .1rem
    background $bgColor
    .search-input
        color #666
        height .62rem
        line-height .62rem
        width 100%
        border-radius .06rem
        text-align center
        padding 0 .1rem
        box-sizing border-box
.search-content
    z-index 1
    overflow hidden
    position absolute
    top 1.58rem
    left 0
    right 0
    bottom 0
    background #eee
    .search-item
         line-height .62rem
         padding-left .2rem
         background #fff
         color #666
</style>